@for $i from 1 through 10 {
  .mt#{$i} {
    margin-top: 5 * $i * 2rpx;
  }

  .mb#{$i} {
    margin-bottom: 5 * $i * 2rpx;
  }
  .ml#{$i} {
    margin-left: 5 * $i * 2rpx;
  }
  .mr#{$i} {
    margin-right: 5 * $i * 2rpx;
  }

  .pt#{$i} {
    padding-top: 5 * $i * 2rpx;
  }

  .pb#{$i} {
    padding-bottom: 5 * $i * 2rpx;
  }
  .pl#{$i} {
    padding-left: 5 * $i * 2rpx;
  }
  .pr#{$i} {
    padding-right: 5 * $i * 2rpx;
  }
  .m#{$i} {
    margin: 5 * $i * 2rpx;
  }
  .p#{$i} {
    padding: 5 * $i * 2rpx;
  }
  .font-size-#{10 + $i*2} {
    font-size: 10 + $i * 2px;
  }
  .flex-#{$i} {
    flex: $i;
  }
}
.text-blue-1 {
  color: $blue-1;
}
.text-blue-2 {
  color: $blue-2;
}
.text-blue-3 {
  color: $blue-3;
}
.text-light-blue {
  color: $light-blue;
}
.text-white {
  color: $white;
}
.text-red {
  color: $red;
}
.text-light-red {
  color: $light-red;
}
.text-pink {
  color: $pink;
}
.text-green {
  color: $green;
}
.text-light-green {
  color: $light-green;
}
.text-orange {
  color: $orange;
}
.text-yellow {
  color: $yellow;
}
.text-gray-1 {
  color: $gray-1;
}
.text-gray-2 {
  color: $gray-2;
}
.text-gray-3 {
  color: $gray-3;
}
.text-black {
  color: $black;
}
.text-white {
  color: $white;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.underline {
  text-decoration: underline;
}
.bg-blue-1 {
  background: $blue-1;
}
.bg-blue-2 {
  background: $blue-2;
}
.bg-blue-3 {
  background: $blue-3;
}
.bg-light-blue {
  background: $light-blue;
}
.bg-white {
  background: $white;
}
.bg-black {
  background: $black;
}
.bg-red {
  background: $red;
}
.bg-light-red {
  background: $light-red;
}
.bg-green {
  background: $green;
}
.bg-light-green {
  background: $light-green;
}
.bg-orange {
  background: $orange;
}
.bg-yellow {
  background: $yellow;
}
.bg-gray-1 {
  background: $gray-4;
}
.bg-gray-2 {
  background: $gray-5;
}
.bg-gray-3 {
  background: $gray-6;
}
.nowrap {
  white-space: nowrap;
}
.show {
  display: $show;
}
.hide {
  display: $hide;
}
.font-bold {
  font-weight: 700;
}
.inline {
  display: inline;
}
.hover-point:hover {
  cursor: pointer;
  opacity: 0.8;
}
.relative {
  position: relative;
}
